<template>
	<view class="list_item" @click="todetail(listItem)" :style="skin">
		<view class="img_box" v-if="imgurl">
			<image class="img" :src="imgurl" @load="imgLoaded" @error="imgLoaded"></image>
			<easy-loadimage :sellout="listItem.sellout" :image-src="listItem.master" :mode="'widthFix'"></easy-loadimage>
		</view>
		<view class="item_info">
			<text class="goods_name u-line-2">{{ listItem.goods_name }}</text>
			<view class="price_box">
				<view class="price_left">
					<text>
						<text>&yen;&nbsp;</text>
						{{ listItem.sell_price }}
					</text>
					<view class="vip-price" v-if="listItem.now_level_price > 0">
						<text class="vip-name">会员价</text>
						<text>￥{{ listItem.now_level_price }}</text>
					</view>
					<text v-else>&yen;&nbsp;{{ listItem.original_price }}</text>
				</view>
				<view class="price_right">
					<text @click.stop="gotrolley(listItem)" :class="mallBaseinfo.trolley_pic + ' iconfont'"></text>
					<text>销量：{{ listItem.sell + (listItem.is_virtual ? listItem.virtual_sell : 0) }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import base from '@/common/baseUrl.js';
import {mapState, mapMutations} from 'vuex';
import util from '@/common/util.js';
export default {
	props: {
		listItem: {
			type: [Object, String, Number, Array],
			default: () => {
				return {};
			}
		},
		type: {
			type: String,
			default: ''
		}
	},

	computed: {
		imgurl() {
			return util.getimgurl(this.listItem.master);
		},
		...mapState({
			mallBaseinfo: state => state.mallBaseinfo,
			skin: state => state.skin
		})
	},
	methods: {
		_click() {
			uni.showToast({
				title: `点击了${this.listItem.index}`,
				icon: 'none',
				position: 'center'
			});
		},
		imgLoaded(e) {
			this.$emit('imgLoaded');
		},
		todetail(item) {
			this.Jumpurl({
				type: 2,
				id: item.id
			});
		},
		gotrolley(item) {
			let data = {
				show: true,
				id: item.id
			};
			this.$store.commit('settrolley', data);
		}
	}
};
</script>

<style scoped lang="scss">
@import url('../css/box-sizing-border-box.css');
.img {
	width: 0;
	height: 0;
	display: none;
}
.list_item {
	// width: 375rpx;
	display: flex;
	// width: 344rpx;
	flex-direction: column;
	background: #ffffff;
	margin-bottom: 20rpx;
	border-radius: 12rpx;
	overflow: hidden;
	// margin: 10rpx;

	.img_box {
	}
	.item_info {
		padding: 16rpx 8rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.goods_name {
		line-height: 40rpx;
		color: #212121;
		font-size: 28rpx;
		font-weight: 500;
		// &.two-line-hide {
		// 	overflow: hidden;
		// 	text-overflow: ellipsis;
		// 	display: -webkit-box;
		// 	-webkit-box-orient: vertical;
		// 	-webkit-line-clamp: 2;
		// }
	}
	.price_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		> view {
			display: flex;
			flex-direction: column;
		}
		.price_left {
			> text:first-child {
				font-size: 32rpx;
				font-weight: 700;
				color: #ff3c29;
				line-height: 40rpx;
				text {
					font-size: 20rpx;
					font-weight: 300;
				}
			}
			> text:last-child {
				color: #969696;
				font-size: 20rpx;
				text-decoration: line-through;
			}
		}
		.price_right {
			text-align: right;
			.iconfont {
				color: var(--main-color);
				font-size: 40rpx;
				line-height: 40rpx;
			}
			> text:last-child {
				color: #969696;
				font-size: 20rpx;
			}
		}
	}
}
</style>
